<template>
  <div class="container">
    <el-card>
      <el-form ref="formInline" :model="formInline" label-width="80px">
        <el-row
          ><el-col :span="4">
            <el-form-item label="关键字" prop="title">
              <el-input
                @keyup.enter="handleFilter"
                style="width: 180px"
                placeholder="根据文章标题搜索"
                class="filter-item"
                v-model="formInline.title"
                filterable
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10">
            <el-form-item label="名称" style="display: inline" filterable>
              <el-select
                v-model="formInline.state"
                class="filter-item"
                placeholder="请选择"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
              <el-button class="qc" @click="clear"> 清除 </el-button>
              <el-button type="primary" @click="handelFilter">搜索</el-button>
              </el-form-item
            ></el-col
          >
          <el-col :span="10">
          <el-button
            class="xzjq"
            icon="el-icon-edit"
            type="success"
            size="small"
            @click="handelAdd"
          >
            新增技巧</el-button
          >
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据记录 -->

      <el-alert :title="alertText" type="info" show-icon :closable="false">
        <template slot-scope="scope">
          <span>{{ scope.row.counts }}</span>
        </template></el-alert
      >

      <!-- 表格 -->
      <el-table
        :data="tableData"
        class="tab"
        :header-cell-style="{
          background: '#fafafa',
          'border-bottom': '3px solid #e8e8e8'
        }"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="80px">
        </el-table-column>
        <el-table-column label="文章标题" width="380px">
          <template slot-scope="scope">
            {{ scope.row.title }}
            <el-link
              v-if="scope.row.videoURL != ''"
              type="primary"
              :underline="false"
              icon="el-icon-film"
              @click="paly(scope.row.videoURL)"
              class="w"
              size="mini"
            ></el-link>
          </template>
        </el-table-column>
        <el-table-column label="阅读数"
          ><template slot-scope="scope">
            <span>{{ scope.row.visits }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人"
          ><template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180"
          ><template slot-scope="scope">
            <span>{{ scope.row.createTime | addDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态"
          ><template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? '已启用' : '已禁用' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="handelPe(scope.row)"
              >预览
            </el-link>

            <el-link
              type="primary"
              :underline="false"
              @click="handelStart(scope.row)"
              ><span v-if="scope.row.state == 0">启用</span>
              <span v-else>禁用</span> </el-link
            ><el-link
              :type="scope.row.state == 0 ? 'primary' : 'info'"
              :underline="false"
              @click="handelEdit(scope.row)"
              :disabled="scope.row.state == 0 ? false : true"
            >
              修改
            </el-link>
            <el-link
              :type="scope.row.state == 0 ? 'primary' : 'info'"
              :underline="false"
              @click="handelDel(scope.row.id)"
              :disabled="scope.row.state == 0 ? false : true"
              >删除</el-link
            ></template
          >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          class="fen"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paramsObj.page"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="paramsObj.pagesize"
          layout="  prev, pager, next, sizes,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 修改和删除的弹框 -->
      <el-dialog
        :title="isEdit == true ? '修改文章' : '添加文章'"
        :visible.sync="dialogVisible"
      >
        <Dialog
          v-if="dialogVisible"
          :dialogVisible.sync="dialogVisible"
          :isEdit="isEdit"
          :row="row"
          @success="success"
        ></Dialog
      ></el-dialog>

      <!-- 预览的对话框 -->
      <el-dialog
        :visible.sync="diaalogVisible"
        :modal-append-to-body="false"
        title="预览文章"
      >
        <Diaalog :diaalogVisible="diaalogVisible" :ros="ros"></Diaalog>
      </el-dialog>
    </el-card>

      <el-dialog
        style="text-align: center"
        title="视频"
        :visible.sync="diaalogVisiblefn">
        <video style="width:100%" controls :src="videoSource"></video>
      </el-dialog>
  </div>
</template>

<script>
import Dialog from './../components/articles-add.vue'
import Diaalog from './../components/articles-preview.vue'

import { list, changeState, remove } from '@/api/hmmm/articles'
export default {
  components: {
    Dialog,
    Diaalog
  },
  data () {
    return {
      // 初始编辑器内容

      id: '',
      ros: {},
      row: {},
      isEdit: false,
      videoSource: '',
      diaalogVisible: false,
      diablogVisible: false,
      dialogVisible: false,
      diaalogVisiblefn: false,
      total: 0,
      alertText: '',
      formInline: { title: '', state: null },

      tableData: [],
      paramsObj: { page: 1, pagesize: 10, title: '', state: null }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const res = await list(this.paramsObj)
      console.log(res, 33)
      this.tableData = res.data.items
      this.total = res.data.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.paramsObj.pagesize = val
      this.getlist()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.paramsObj.page = val
      this.getlist()
    },
    // 按钮状态切换
    async handelStart (sta) {
      let status = '启用'
      if (sta.state === 1) {
        sta.state = 0
        status = '禁用'
      } else {
        sta.state = 1
        status = '启用'
      }

      var data = {
        id: sta.id,
        state: sta.state
      }
      const res = await changeState(data)
      this.$message.success({ message: '操作成功!', type: 'success' })
      console.log(res, 22)
    },
    async handelDel (id) {
      const res = await this.$confirm(
        '此操作将永久删除该文件,是否继续?',
        '提示',

        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      console.log(res, 8)
      if (res === 'confirm') {
        // 表示点击的是确认按钮
        await remove(id) // 刷新页面
        this.getlist() // 成功的提示
        this.$message({ type: 'success', message: '删除成功!' })
      }
    },
    // 搜索
    handelFilter () {
      console.log(this.formInline, 111)
      this.paramsObj = this.formInline

      this.getlist()
    },
    clear () {
      this.formInline = { title: '', state: null }
      this.paramsObj = this.formInline

      this.getlist()
    },
    handelAdd () {
      this.dialogVisible = true
      this.isEdit = false
    },
    handelEdit (row) {
      console.log(row, 34)
      this.isEdit = true
      this.row = row
      this.dialogVisible = true
    },
    // 预览
    handelPe (ros) {
      console.log(ros, 34)

      this.diaalogVisible = true
      this.ros = ros
    },
    onCanecl () {
      this.diablogVisible = false
    },

    success () {
      this.dialogVisible = false
      this.getlist()
    },
    paly (url) {
      this.videoSource = url
      this.diaalogVisiblefn = true
    }
  }
}
</script>

<style scoped lang="scss">
.el-link {
  margin-right: 4px;
}
.w {
  border: 0px;
}
.fen {
  text-align: right;
}
.tab {
  margin-top: 10px;
}
.qc{

  margin-left: 10px;
}
.xzjq{
  float: right;
  margin-right: 20px;
}
::v-deep .el-dialog__header{
  height: 60px;
}
</style>
